import React, { useState } from "react";
import { Button } from "antd";
import "./Demo1.less";
import { flushSync } from "react-dom";

const Demo = function Demo() {
  console.log("渲染");
  let [num, setNum] = useState(0);

  //   const handle = () => {
  //     // for (let i = 0; i < 10; i++) {
  //     //   setNum(num + 1); // 异步操作，只执行一次
  //     // }

  //     for (let i = 0; i < 10; i++) {
  //       //   flushSync(() => {
  //       //     setNum(num + 1);
  //       //   });
  //       setNum(num + 1); // 也只执行一次
  //     }
  //   };

  //   实现需求：让函数只更新一次，但是最后的结果是20
  const handle = () => {
    for (let i = 0; i < 10; i++) {
      setNum((prev) => {
        // prev：存储的是上一次的状态值
        console.log(prev);
        return prev + 1; // 返回的信息是我们要修改的状态值
      });
    }
  };

  return (
    <div className="demo">
      <span className="num">{num}</span>
      <Button type="primary" size="small" onClick={handle}>
        新增
      </Button>
    </div>
  );
};

export default Demo;
